<%@page import="jpa.entities.Employee"%>
<%@page import="jsp.Datetime"%>
<jsp:useBean id="user" class="jsp.classes.Session" scope="session"/>
<%Employee e = user.getEmployee();%>
<script type="text/javascript">
    $(document).ready(function(){
        $(".profileaddfield").click(function(){
            var j = $(this).attr("id");
            $("<input type=\"text\" name=\"" + j + "\" id=\""+j+"\" class=\"disposable inputField\"/><span class=\"illegal" + j + "\"></span><br />").insertBefore($(this));
            $(this).prev().prev().prev().focus();
        });
        $(".disposable").live("focusout", function(){
            if($(this).attr("value") == "" || $(this).attr("value") == null){
                $(this).next().remove();
                $(this).next().remove();
                $(this).remove();
            }
        });
        $(".disposable").live("keyup", function(){
            switch($(this).attr("name")) {
                case "phonenumber":
                    $(this).next().html($(this).attr("value").replace(/[+]+/, "00").replace(/[-]+/, "").replace(/[\s]+/, "").match(/^\d{13}$/) ? "" : "Phone number is incorrect \"0031634173917\"");
                    return;
                case "emailaddress":
                    $(this).next().html($(this).attr("value").toLowerCase().match(/[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}/) ? "" : "Invalid email address \"example@example.com\"");
                    return;
                case "webaddress":
                    $(this).next().html($(this).attr("value").toLowerCase().match(/[a-zA-Z0-9._-]+\.[a-zA-Z]{2,4}/) ? "" : "Invalid Web Address. Example: \"www.example.com\"");
                    return;
            }
        });
    });

    function updatePage(){
        
    }

    
    function submitForm()
    {   
        var stateMessage = "";
        
        var data = $("#profileForm").serialize();
        
        $.ajax({
            type: "post",
            url: "http://localhost:8080/Baalzebub/editprofile",
            data: data,
            success: function (data, textStatus, jqXHR) {
                if(data == "true")
                {
                    $("#state").html("Your profile has been Updated!");
                    
                }
                else
                {
                    $("#state").html("An error has occurred");
                }
            },
            error: function () {
                $("#state").html("Please fill in all the required fields!");
            }
        });
        
    
        
    }
    
</script>
<p class="Title">Profile</p>
<div class="profile">

    <div class="profileDiv">
        <form method="post" action="" name="profile" id="profileForm" target="_blank">
            <table>
                <tbody>
                    <tr><td colspan="2"><p styl="margin:0;padding:0;" id="state"></p></td></tr>
                    <tr>
                        <td>Username:</td>
                        <td>
                            <input class="inputField" type="text" name="username" id="username" value="<%=e.getUserName()%>"/>
                        </td>
                    </tr>
                    <tr>
                        <td>First name:</td>
                        <td><p class="indentText"><%=e.getFirstName()%></p></td>
                    </tr>
                    <tr>
                        <td>Last name:</td>
                        <td><p class="indentText"><%=e.getLastName()%></p></td>
                    </tr>
                    <tr>
                        <td>Middle names</td>
                        <td><p class="indentText"><%=e.getMiddleNames()%></p></td>
                    </tr>
                    <tr>
                        <td>Birth date</td>
                        <td><p class="indentText"><%=Datetime.format(e.getBirthDate(), "%Y-%m-%d")%></p></td>
                    </tr>
                    <tr>
                        <td>Membership date</td>
                        <td><p class="indentText"><%=Datetime.format(e.getMembershipDate(), "%Y-%m-%d")%></p></td>
                    </tr>
                    <tr>
                        <td>Termination date</td>
                        <td><p class="indentText"><%=Datetime.format(e.getTerminationDate(), "%Y-%m-%d")%></p></td>
                    </tr>
                    <tr>
                        <td>Town</td>
                        <td>
                            <input class="inputField" type="text" name="town" id="town" value="<%=e.getTown()%>"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Postal code</td>
                        <td>
                            <input class="inputField" type="text" name="postalcode" id="postalcode" value="<%=e.getPostalCode()%>"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Country</td>
                        <td>
                            <input class="inputField" type="text" name="country" id="country" value="<%=e.getCountry()%>"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Social security number</td>
                        <td><p class="indentText"><%=e.getSocialSecurityNumber()%></p></td>
                    </tr>
                    <tr>
                        <td>Phone numbers</td>
                        <td>
                            <%for (String p : e.getPhoneNumbers()) {%>
                            <input class="inputField" type="text" name="phonenumber" id="phonenumber" value="<%=p%>" class="disposable"/>
                            <span class="illegalphonenumber"></span>
                            <br />
                            <%}%>
                            <a id="phonenumber" class="profileaddfield">+</a>
                        </td>
                    </tr>
                    <tr>
                        <td>Email addresses</td>
                        <td>
                            <%for (String m : e.getEmailAddresses()) {%>
                            <input class="inputField" type="text" name="emailaddress" value="<%=m%>" id="emailaddress" class="disposable"/>
                            <span class="illegalemailaddress"></span>
                            <br />
                            <%}%>
                            <a id="emailaddress" class="profileaddfield">+</a>
                        </td>
                    </tr>
                    <tr>
                        <td>Websites</td>
                        <td>
                            <%for (String w : e.getWebAddresses()) {%>
                            <input class="inputField" type="text" name="webaddress" value="<%=w%>" id="webaddress" class="disposable"/>
                            <span class="illegalwebaddress"></span>
                            <br />
                            <%}%>
                            <a id="webaddress" class="profileaddfield">+</a>
                        </td>
                    </tr>
                    <tr>
                        <td>Old password</td>
                        <td>
                            <input class="inputField" type="password" id="oldpassword" name="oldpassword"/>
                        </td>
                    </tr>
                    <tr>
                        <td>New password</td>
                        <td>
                            <input class="inputField" type="password" id="password" name="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td>Confirm password</td>
                        <td>
                            <input class="inputField" type="password" id="password" name="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <a href="javascript: submitForm()" class="okButton"><div class="okButton"><p class="okText">OK</p></div></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>
</div>